<template>
	<div class="search-box">
	    <input class="search-txt" type="text" name="" placeholder="Type to search">
	    <a class="search-btn" href="#">
	        <i class="fas fa-search"></i>
	    </a>
	</div>
</template>


<script>
</script>

<style>
	.search-box{
	    /* position: absolute;
	    top:50%;
	    left:50%;
	    transform: translate(-50%,-50%); */
	    background: #2f3640;
	    height: 2.25rem;
	    border-radius: 2.5rem;
	    /* padding: 10px; */
	}
	/* .search-box:hover>.search-txt{
	    width: 240px;
	    padding: 0 6px;
	} */
	.search-box:hover>.search-btn{
	   background: white;
	}
	.search-btn{
	    color: #e84118;
	    float:right ;
	    width: 2.25rem;
	    height: 2.25rem;
	    border-radius: 50%;
	    background: #2f3640;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}
	.search-txt{
	    border: none;
	    background: none;
	    outline: none;
	    float: left;
	    padding-left: 0.325rem;
			vertical-align: middle;
	    color: white;
	    font-size: 16px;
	    /* transition: 0.4s; */
	    line-height: 2.25rem;
	    /* width: 15rem; */
	}
</style>
